<script>
export default {
  name: "customDirectives",
  data() {
    return {
      redd: 'green',
      val: '',
      yel: 'yellow'
    }
  },
  methods: {},
//   私有自定义指令
  directives: {
  //   ownFs20  own-fs20
  //   第一种写法  相当于只有bind方法
    'own-fs20'(el,binding){
      console.log(el,'私有定义el')
      console.log(binding,'私有定义binding')
      el.focus()
    },
  //   第二种写法
    'own-fs40':{
      // bind(el,binding){},
      // inserted(el){},
      // update(el){}
    }
  }
}
</script>

<template>
  <div>
    自定义指令
    <div v-color="redd">文本内容</div>
    <div v-color="yel">文本内容黄色</div>
    <input type="text" v-model="val" v-color="redd">
    <div v-own-fs20>这是文本</div>
    <input type="text" v-model="val" v-own-fs20>
    <input type="text" v-model="val" v-own-fs40>

  </div>
</template>

<style scoped lang="less">

</style>